<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F2F2F2;
        }


        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }


    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">用户管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree" v-if="treeView" v-on:click-node="aa" :tabSign="'u'"></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form label-width="80px" :model="userForm" ref="userForm" :disabled="!editMod">
                        <el-form-item label="用户名"
                                      prop="userName"
                                      :rules="[
                                     {required:true,message:'请输入用户名,内容不能为空!',trigger:'blur'}
                            ]">
                            <el-input v-model="userForm.userName" style="width: 15%;" disabled="true"></el-input>
                        </el-form-item>


                        <el-form-item label="所属公司" prop="Company"
                                      :rules="[
                                     {required:true,message:'请选择公司,内容不能为空!',trigger:'blur'}
                            ]">
                            <el-select v-model="userForm.Company" filterable placeholder="请选择公司" style="width: 15%;">
                                <el-option
                                        v-for="item in companyList"
                                        :key="item.companyCode"
                                        :label="item.companyName"
                                        :value="item.companyCode">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="父节点" prop="parentId"
                                      :rules="[
                                     {required:true,message:'请选择父节点,内容不能为空!',trigger:'blur'}
                            ]">
                            <el-select v-model="userForm.parentId" filterable placeholder="请选择父节点" style="width: 15%;">
                                <el-option
                                        v-for="item in child"
                                        :key="item.Id"
                                        :label="item.Text"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-select v-model="userForm.roleId" filterable placeholder="请选择角色" style="width: 15%;">
                                <el-option
                                        v-for="item in roleData"
                                        :key="item.Id"
                                        :label="item.roleName"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="userForm.Telephone" style="width: 15%;"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-button type="primary" @click="saveBtn()">保存</el-button>

                            <el-button @click="delBtn()">删除</el-button>

                            <el-button @click="addChild()">新增子用户
                            </el-button>
                        </el-row>
                        </el-form-item>
                    </el-form>
                    <el-dialog
                            title="增加用户"
                            :visible.sync="addFormVisible"
                            width="45%"
                    >
                        <el-card>
                            <el-form label-width="80px" :model="childForm" ref="childForm" :disabled="!editMod">
                                <el-form-item label="用户名"
                                              prop="userName"
                                              :rules="[
                                     {required:true,message:'请输入用户名,内容不能为空!',trigger:'blur'}
                            ]">
                                    <el-input v-model="childForm.userName" style="width: 40%;"></el-input>
                                </el-form-item>


                                <el-form-item label="密码"
                                              prop="Password"
                                              :rules="[
                                     {required:true,message:'请输入密码,内容不能为空!',trigger:'blur'}
                            ]">
                                    <el-input type="password" v-model="childForm.Password"
                                              style="width: 40%;"></el-input>
                                </el-form-item>


                                <el-form-item label="确认密码"
                                              prop="checkPass"
                                              :rules="[
                                     {required:true,message:'请输入密码,内容不能为空!',trigger:'blur'}
                            ]">
                                    <el-input v-model="childForm.checkPass" type="password"
                                              style="width: 40%;"></el-input>
                                </el-form-item>

                                <el-form-item label="所属公司">
                                    <el-select v-model="childForm.Company" filterable placeholder="请选择公司"
                                               style="width: 40%;">
                                        <el-option
                                                v-for="item in companyList"
                                                :key="item.companyCode"
                                                :label="item.companyName"
                                                :value="item.companyCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="角色">
                                    <el-select v-model="childForm.roleId" filterable placeholder="请选择角色"
                                               style="width: 40%;">
                                        <el-option
                                                v-for="item in roleData"
                                                :key="item.Id"
                                                :label="item.roleName"
                                                :value="item.Id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="联系电话">
                                    <el-input v-model="childForm.Telephone" style="width: 40%;"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <br/>

                        <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="cancleChild()">取消</el-button>
                    <el-button type="primary" @click="submitChild()"
                               style="text-align: center">确定</el-button>
            </span>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            userForm: {},
            childForm: {},
            addFormVisible: false,
            editMod: false,
            currentId: '',
            expandId: '',
            number: 0,
            roleData: [],
            companyList: [],
            child: [],
            treeView:false,
        },
        methods: {

            aa: function (data) {

                this.currentId = data.dataId;
                if (data.id.split("_")[0] == 'U') {
                    this.editMod = true;
                    this.getUserDetail({Id: data.dataId})
                } else {
                    this.editMod = false;
                    this.userForm = {};
                }

            },
            saveBtn() {
                this.$refs.userForm.validate((valid) => {
                    if (valid) {
                        this.userForm.Role = this.userForm.roleId;
                        HttpUtil.get('User/Update', this.userForm).success((res) => {
                            this.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                            location.reload();
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }
                });
            },
            addChild() {
                this.childForm.parentId = this.currentId;
                this.addFormVisible = true;
            },
            submitChild() {
                this.$refs.childForm.validate((valid) => {
                    if (valid) {
                        if (this.childForm.Password !== this.childForm.checkPass) {
                            this.$message({
                                type: 'error',
                                message: '密码不一致'
                            })
                        } else {
                            HttpUtil.get('User/Add', this.childForm).success((res) => {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                });
                                this.treeView = false;
                                this.treeView = true;
                            })
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }
                });
            },
            cancleChild() {
                this.childForm = {};
                this.addFormVisible = false;
            },
            getUserDetail(params) {
                HttpUtil.get('User/Detail', params).success((res) => {
                    this.userForm = res.data[0];
                    this.userForm.roleId += '';
                    this.userForm.parentId += '';
                    console.log(this.userForm);
                })
            }

        },
        created: function () {
            HttpUtil.get('Company/List').success((res) => {
                this.companyList = res.data;
            });
            HttpUtil.get('role/list').success((res) => {

                for (var ind in res.data) {
                    res.data[ind].Id += '';
                }
                this.roleData = res.data
            });
            HttpUtil.get('User/Child', {parentId: SiteConfig.account.id}).success((res) => {
                for (var ind in res.data) {
                    res.data[ind].Id += '';
                }
                this.child = res.data;
            })
        },
        mounted: function () {
            this.treeView = true;
        }
    });


</script>

</body>
</html>
